<template>
  <div class="cust-dialog">
    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      :width="width"
      :show-close="false"
    >
      <span slot="title" class="dialog-title">
        <span>{{ title }}</span>
        <button type="button" class="el-dialog__headerbtn" @click="close">
          <i class="el-dialog__close el-icon el-icon-close"></i>
        </button>
      </span>
      <slot></slot>
      <template v-if="buttons">
        <div slot="footer" class="dialog-footer">
          <el-button v-if="showCancel" type="text" @click="close" size="mini"
            >取消</el-button
          >
          <el-button
            :key="index"
            v-for="(button, index) in buttons"
            :type="button.type"
            @click="button.click"
            size="mini"
            >{{ button.text }}</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    visible: Boolean,
    buttons: Array,
    showClose: {
      type: Boolean,
      default: true,
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: '30%',
    },
  },
  methods: {
    close: function() {
      // 调用父组件的方法，传递参数,只能传递一个参数，多个参数用对象传递
      this.$emit('close')
    },
  },
}
</script>
<style lang="less">
.cust-dialog {
  .el-dialog__header {
    padding: 16px 24px;
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__body {
    padding: 20px !important;
  }
  .el-dialog__footer {
    padding: 10px;
    border-top: 1px solid #e8e8e8;
  }
}
</style>
